<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-听说考试-学习报告'"> </Breadcrumb>
        <view class="content">
          <view class="box">
            <view class="header">
              <view class="title">
                <view class="title_content">
                  《{{ bookInfo.name }}》· {{ chapterInfo.name }}
                </view>
                <view class="title_bg">
                  <image
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/ipad/title_bg2.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
              <view class="tabs">
                <view class="tabs_content"> 学习报告 </view>
              </view>
            </view>
            <view class="section">
              <view class="chart">
                <qiun-data-charts
                  type="line"
                  :chartData="chartData"
                  :ontouch="true"
                  :opts="opts"
                  background="none"
                />
              </view>
              <view class="list" v-if="historyList.length > 0">
                <view class="list_item list_title">
                  <text>分数</text>
                  <text>总题数</text>
                  <text>已做</text>
                  <text>答题日期</text>
                  <text></text>
                </view>
                <view
                  class="list_item"
                  v-for="(item, index) in historyList"
                  :key="index"
                  @click="viewReportDetail(item)"
                >
                  <text>{{ item.gotScore }}</text>
                  <text>{{ item.questionCount }}</text>
                  <text>{{ item.doneCount }}</text>
                  <text>{{ item.answerTime.slice(0, 10) }}</text>
                  <view class="list_icon">
                    <u-icon
                      name="arrow-right"
                      color="#81b7ff"
                      size="28"
                    ></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { elstHistoryList } from "@/api/elst";
export default {
  components: {},
  data() {
    return {
      type: "",
      chapterId: "",
      bookInfo: {},
      chapterInfo: {},
      historyList: [],
      chartData: {
        categories: [],
        series: [],
      },
      opts: {
        enableScroll: true,
        xAxis: {
          itemCount: 2,
        },
      },
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.type = option.type;
    this.init();
  },
  methods: {
    init() {
      let params = {
        type: this.type,
        chapterId: this.chapterId,
      };
      elstHistoryList(params).then((res) => {
        this.bookInfo = res.data.book;
        this.chapterInfo = res.data.chapter;
        this.historyList = res.data.chapterRecs;
        let categoriesData = [];
        let seriesData = [];
        this.historyList.forEach((item) => {
          categoriesData.push(item.answerTime);
          seriesData.push(item.gotScore);
        });
        this.chartData = {
          categories: categoriesData,
          series: [
            {
              name: "成绩趋势",
              data: seriesData,
            },
          ],
        };
      });
    },
    viewReportDetail(item) {
      uni.navigateTo({
        url: `/pages/examination/examinationReportDetail?chapterId=${this.chapterId}&type=${this.type}&historyId=${item.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./examinationReport.scss";
</style>
